<template>
  <div style="width: 100%;height: 100%">
    <el-collapse v-model="activeCollapseItem">
      <el-collapse-item v-for="group in widgetGroup" :name="group.name">
        <template slot="title">
          <div style="margin-left: 15px">{{group.name}}</div>
        </template>
        <div class="components">
          <a
            v-for="comp in group.children"
            :key="comp.name"
            class="item"
            draggable="true"
            @dragstart="onComponentDragStart($event, comp)"
            @dragend="onComponentDragEnd">
            <svg-icon :icon-class="comp.icon"/>
            <span class="nameWrapper">{{ comp.title }}</span>
          </a>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import vpd from '../../mixins/vpd';
  import widgets from '../../../widgets';

  export default {
    mixins: [vpd],
    data() {
      return {
        activeCollapseItem: [],
        widgetGroup: [], // 组件库
      }
    },
    beforeMount() {
      // this.getComponents();
      this.widgetGroup = widgets.groups();
      this.activeCollapseItem = this.widgetGroup.map(group => group.name)
    },
    methods: {
      onComponentDragStart(ev, item) {
        console.log('onComponentDragStart', item)
        ev.dataTransfer.setData('item', JSON.stringify(item));
      },
      onComponentDragEnd(ev) {
        ev.dataTransfer.clearData();
      },
    }
  }
</script>
<style lang="scss" scoped>
  .components {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 6px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 90px;
      cursor: pointer;
      font-size: 12px;
      color: #666;

      .svg-icon {
        font-size: 30px;
        margin-top: 20px;
      }

      .nameWrapper {
        vertical-align: top;
        position: relative;
        text-align: center;
        height: 24px;
        width: 100%;
      }
    }

    .item:hover {
      background-color: #f5f5f5;
      color: #1a74ad;
    }
  }
</style>
